<template>
  <div>
    <el-table v-loading="loading" :data="funDetails.list">
      <el-table-column
        width="400"
        label="定时计划"
        align="center"
        key="startTime"
        prop="startTime"
      >
        <template slot-scope="scope">
          <el-time-picker
            :disabled="isOnlyView"
            v-model="scope.row.timeArray"
            is-range
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        label="门锁权限"
        align="center"
        key="personName"
        prop="personName"
      >
        <template slot-scope="scope">
          <el-select
            clearable
            v-model="scope.row.doorLock"
            placeholder="请选择"
            :disabled="isOnlyView"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="通行方式"
        align="center"
        key="personName2"
        prop="personName2"
      >
        <template slot-scope="scope">
          <section class="flex-row" style="flex-wrap: wrap; margin: 5px 0">
            <div
              v-for="(item, index) in scope.row.trafficTypeArray"
              class="flex-row"
              style="margin: 5px 0"
              :key="index"
            >
              <div style="margin: 0 7px" v-if="index == 0"></div>
              <div
                class="flex-row"
                style="margin: 5px"
                v-if="index > 0 && index !== scope.row.trafficTypeArray.length"
              >
                |
              </div>
              <div class="flex-row">
                <el-select
                  collapse-tags-tooltip
                  clearable
                  v-model="scope.row.trafficTypeArray[index]"
                  multiple
                  placeholder="请选择"
                  :disabled="isOnlyView"

                >
                  <el-option
                    v-for="(item, i) in options"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div
                  style="margin: 5px; cursor: pointer"
                  @click="handleDelTrafficType(scope.row, scope.$index, index)"
                >
                  <svg-icon icon-class="cross" class-name="arrow-icon"/>
                </div>
              </div>
            </div>
            <div></div>
          </section>
        </template>
      </el-table-column>
      <!-- <el-table-column
        width="280"
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <div style="width: 100%">
            <el-button
              :disabled="isOnlyView"
              size="small"
              plain
              @click="addTrafficType(scope.row.trafficTypeArray)"
              style="margin: 10px 0"
            >
              新增通行方式
            </el-button>
            <el-button
              :disabled="isOnlyView"
              class="btn-red"
              size="small"
              plain
              @click="handleDel(scope.row, scope.$index)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <el-button :disabled="isOnlyView"
               size="small" plain @click="addTime" style="margin: 10px 0">
      新增定时计划
    </el-button>
  </div>
</template>

<script>
import {
  addTimeCommon,
  addTrafficTypeCommon,
  commonConfiguration,
  depart,
  handleDelSingleIntervalPlan, resetFunDetails,
} from "./common-configuration.js";

export default {
  data() {
    return {
      loading: false,
      isOnlyView: commonConfiguration.isOnlyView,
      options: commonConfiguration.options,
      options2: commonConfiguration.options2,
      limit: commonConfiguration.limit,
      funDetails: {
        list: [],
      },
    };
  },
  methods: {

    init(data, type) {
      if (type == "添加") {
        resetFunDetails(this)
      } else {
        //编辑
        this.mapData(data);
      }
    },
    mapData(data) {
      resetFunDetails(this)
      if (data.length) {
        data.forEach((e, i) => {
          if (e.traffic_rule_type == "1") {
            // let start_hours = Number(e.start_time.slice(0, 2));
            // let start_minutes = Number(e.start_time.slice(3, 5));
            // let start_seconds = Number(e.start_time.slice(6, 8));
            // let end_hours = Number(e.end_time.slice(0, 2));
            // let end_minutes = Number(e.end_time.slice(3, 5));
            // let end_seconds = Number(e.end_time.slice(6, 8));
            let arr = [];
            // console.log(e)
            // 拆解通行方式
            // e.traffic_type.split(",").map((e, i) => {
            //   arr.push(depart(e));
            // });
            const typeMap = {
              1: '1',
              2: '2',
              4: '3',
              8: '4',
            }
            const typeArr = []
            for (const key in typeMap) {
              if (Object.hasOwnProperty.call(typeMap, key)) {
                if ((e.traffic_type & key) !== 0) {
                  typeArr.push(typeMap[key])
                }
              }
            }
            arr.push(typeArr)

            this.funDetails.list.push({
              timeArray: [
                `${new Date(2016, 9, 10, Math.floor(e.start_time / 3600), Math.floor(e.start_time % 3600) / 60, Math.floor(e.start_time % 60) )}`,
                `${new Date(2016, 9, 10, Math.floor(e.end_time / 3600), Math.floor(e.end_time % 3600) / 60, Math.floor(e.end_time % 60) )}`
              ],
              trafficRuleType: e.traffic_rule_type,
              trafficTypeArray: arr,
              doorLock: e.door_lock,
              random_hash_key: Math.random(),
            })
          }
        });
      }
    },

    addTime() {
      addTimeCommon(this.funDetails.list, "1");
    },

    addTrafficType(row) {
      addTrafficTypeCommon(row, this.limit, this);
    },

    handleDel(row, index) {
      handleDelSingleIntervalPlan(
        row,
        index,
        "工作日",
        this.funDetails.list,
        this
      );
    },

    handleDelTrafficType(row, row_index, item_index) {
      this.funDetails.list[row_index].trafficTypeArray.splice(item_index, 1);
    },

    //表单提交
    submitForm() {
      // console.log(funDetails, "form1");
      return this.funDetails;
    },
  },
};
</script>

<style lang="scss">
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
</style>
